{{template "common/header.html" .}}
{{template "common/nav.html" .}}

<section class="main">
    <div class="container">

        <div class="columns">
            <div class="column is-21">
                <div class="widget">
                    <div class="header">
                        <nav class="breadcrumb" aria-label="breadcrumbs">
                            <ul>
                                <li><a href="{{baseUrl}}">首页</a></li>
                                <li>
                                    <a href="{{baseUrl}}/user/{{.CurrentUser.Id}}?tab=topics">{{.CurrentUser.Nickname}}</a>
                                </li>
                                <li class="is-active"><a href="#" aria-current="page">主题</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="content">
                        <div class="field">
                            <div class="control">
                                <input name="title" id="title" class="input" type="text" value="{{.Topic.Title}}"
                                       placeholder="请输入标题，如果标题能够表达完整内容，则正文可以为空">
                            </div>
                        </div>

                        <div class="field">
                            {{/*<label class="label">标签</label>*/}}
                            <div class="control">
                                {{$Tags := .Topic.Tags}}
                                {{template "topic/taginput.html" $Tags }}
                            </div>
                        </div>

                        <div class="field">
                            <div class="control">
                                <div id="editor" style="border: 1px solid #d1d5da;"></div>
                            </div>
                        </div>


                        <div class="field is-grouped">
                            <div class="control">
                                <a class="button is-success" id="topicEditSubmit">保存修改</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-3">
                <div class="widget">
                    <div class="header">Markdown 语法参考</div>
                    <div class="content">
                        <ol>
                            <li><tt>### 单行的标题</tt></li>
                            <li><tt>**粗体**</tt></li>
                            <li><tt>`console.log('行内代码')`</tt></li>
                            <li><tt>```js\n code \n```</tt> 标记代码块</li>
                            <li><tt>[内容](链接)</tt></li>
                            <li><tt>![文字说明](图片链接)</tt></li>
                        </ol>
                        <span><a href="https://www.mlog.club/article/5522" target="_blank">Markdown 文档</a></span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/vditor/dist/index.classic.css"/>
<script src="//cdn.jsdelivr.net/npm/vditor/dist/index.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    const vditor = new Vditor('editor', {
      cache: false,
      height: 400,
      toolbar: ['emoji', 'headings', 'bold', 'italic', 'strike', '|', 'line', 'quote', 'list', 'ordered-list', 'check', 'code',
        'inline-code', 'undo', 'redo', 'upload', 'link', 'table', 'preview', 'fullscreen'],
      placeholder: '主题内容（可为空）',
      upload: {
        accept: 'image/*',
        token: 'test',
        url: '{{baseUrl}}/upload/editor',
        linkToImgUrl: '{{baseUrl}}/upload/fetch',
        filename(name) {
          return name.replace(/\?|\\|\/|:|\||<|>|\*|\[|\]|\s+/g, '-')
        }
      },
    })
    vditor.setValue('{{.Topic.Content}}')
    vditor.focus()

    $('#topicEditSubmit').click(function () {
      var params = {
        title: $('#title').val(),
        content: vditor.getValue(),
        tags: $('#tags').val(),
      }
      httpPost('{{baseUrl}}/topic/edit/{{.Topic.TopicId}}', params).then(function (data) {
        window.location = '{{baseUrl}}/topic/' + data.topicId
      }, function (response) {
        alert(response.message)
      })
    })
  })
</script>

{{template "common/footer.html" .}}
